<template>
    <div class="container">
        <h3>新增</h3>
        <el-form :model="ruleForm" ref="ruleForm" :rules="rules" :label-position="labelPosition" label-width="120px" class="demo-ruleForm">
			<el-row>
				<el-col :span="12">
					<el-form-item label="工艺名称：" prop="name">
						<el-input placeholder="请输入内容" v-model="ruleForm.name" style="width:300px">
						</el-input>
					</el-form-item>
					<el-form-item label="执行标准：">
                        <el-upload
                            class="upload-poster"                               
                                action="https://jsonplaceholder.typicode.com/posts/"
                                :show-file-list="false"
                                :on-change="imgPreview"
                                :auto-upload="false">
                                <img v-if="standardsImg" :src="standardsImg" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                        jpg、png、gif格式，60x60像素，不超过2MB
                    </el-form-item>
				</el-col>
				<el-col :span="10">
					<el-form-item label="关联品名：" prop="productName">
						<el-select v-model="ruleForm.productName"  value-key="id" filterable placeholder="请选择" style="width: 300px;">
							<el-option
								v-for="item in basesourcelist"
								:key="item.id"
								:label="item.name"
								:value="item.name"
							>
							{{item.name}}
							</el-option>
						</el-select>
					</el-form-item>
				</el-col>
				
			</el-row>
			
            <el-row>
                <el-table
                    :data="tableData"
                    border
                    style="margin-top:20px;"
                    ref="multipleTable"
                    header-cell-class-name="table-header"
                >
					<el-table-column prop="sort" sortable label="排序">
						<template slot-scope="scope">
							<el-input v-model="scope.row.sort" placeholder="请输入内容" style="width:200px;"></el-input>
						  
						</template>
					</el-table-column>
					<el-table-column prop="name" sortable label="标准名称">
						<template slot-scope="scope">
							<el-input v-model="scope.row.name" placeholder="请输入内容" style="width:200px;"></el-input>
						  
						</template>
					</el-table-column>
					
                    <!-- <el-table-column prop="createTime" sortable label="添加时间"></el-table-column> -->
                    <el-table-column prop="basis" sortable label="检测标准文件">
                        <template slot-scope="scope">
							<el-input v-model="scope.row.specification" placeholder="请输入内容" style="width:400px;"></el-input>
                          
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="150" align="center">
                        <template slot-scope="scope">
                            <el-button
                                type="text"
                                style="color:red;"
                                
                                @click="handleDelete1(scope.$index, scope.row)"
                            >删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-row>
			<el-button type="primary" style="margin-top:20px;" @click="addlist">添加一条</el-button>
			<el-form-item class="footerFixed" label-width="0px">
				<el-button type="primary" @click="submitrule('ruleForm')">提交</el-button>
				<el-button @click="backPage">返回</el-button>
			</el-form-item>
            
        </el-form>
    </div>
</template>

<script>
	import {technology_save,basesource_findByAll,technology_findById} from "@/request/api"

    export default {
        data() {
            return {
                basesourcelist:[],
                tableData:[{
					sort:1,
					checkName:'',
					basis:''
				}],
                city:'',
                area:'',
                isShow:false,
                standardsImg:'',
                // options: regionData,
                selectedOptions: [],
                labelPosition:'right',
                allMessage: '',
                ruleForm: {},
                rules:{}
            };
        },
        mounted(){
            this.getproductname()
            this.id = this.$route.query.id
            if(this.id == undefined){
                
            }else{
                this.init()
            }
        },
        methods: {
			handleDelete1(index,row){
				this.tableData.splice(index,1)
			},
			
			addlist(){
				// console.log(this.tableData.length)
				let sort = this.tableData.length + 1
				this.tableData.push({sort:sort,checkName:'',basis:''})
			},
            getproductname(){
				
                 basesource_findByAll("").then((res)=>{
                    this.basesourcelist = res.data
                })
            },
            // 编辑获取数据
            init(){
               
                technology_findById(this.id).then((res)=>{
                    this.ruleForm = res.data
                    this.standardsImg = this.$store.state.imageUrls + this.ruleForm.standardsImg
					this.tableData = this.ruleForm.technologies
                })
            },
          
            // 返回
            backPage () {
                this.$router.go(-1);
            },
            // 新增
            submitrule(formName) {
				 let formdata = new FormData()
				this.ruleForm.technologiesList = JSON.stringify(this.tableData)
				for(var a in this.ruleForm){
				    if(this.ruleForm[a] == null || this.ruleForm[a] == "null"){
				        this.ruleForm[a] = ""
				        formdata.append(a,'') 
				    }else{
				        formdata.append(a,this.ruleForm[a])
				    }
				}
               technology_save(formdata).then((res)=>{
				   this.$notify({
				       title: '提示',
				       message: '保存成功',
				       type: 'success',
				       duration:1000
				   });
				   this.$router.go(-1)
			   })
            },
         
            imgPreview(file,fileList) {
                this.standardsImg =  URL.createObjectURL(file.raw);
                let fileName = file.name;
                let regex = /(.jpg|.gif|.png)$/;
                if (regex.test(fileName.toLowerCase())) {
                    this.ruleForm.files = file.raw
                    this.ruleForm.standardsImg = file.name
                } else {
                    this.$message.error('请选择图片文件');
                }
            }, 
          
               
        }
    }
</script>

<style scoped lang="less">
.demo-ruleForm{
    margin-top: 10px;
}
.demo-ruleForm .el-radio--small.is-bordered{
    width: 120px !important;
    margin-right: 10px !important;
}
.box{
    width: 85%;
    margin-bottom: 15px;
    dl{
        margin-bottom: 20px;
        overflow: hidden;
        dt{ margin-bottom: 5px; font-size: 14px;}
        dd{ font-weight: 500; font-size: 12px; float: left; width: 50%; line-height: 24px;}
    }
    dl:last-child{
        margin-bottom: 0;
    }
    .el-col-11{
        height: 200px;
        overflow-y: auto;
        margin-left: 10px;
        border-left: 1px solid #EBEEF5;
        padding-left: 10px;
        p{ color: #303133;}
        .record-tip-con{
            padding-top: 10px;
        }
    }
}

 .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    width:180px;
    overflow: hidden;
  }
  
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .el-upload--text{
      width:180px;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>